<template>
  <view>
    <u-navbar :is-back="true" :title="header"></u-navbar>
    <view class="content">
      <view>
        <view class="search-wrapper searchBox">
          <u-search v-model="listQuery.workItemName" :show-action="false" bg-color="#fff" height="70"
                    placeholder="请输入工项名称" shape="round" @search="search"></u-search>
        </view>
        <view class="list">
          <u-empty v-if="!storeList.length" mode="list"></u-empty>
          <scroll-view
              scroll-y="true"
              style="height: 70vh;"
              @scrolltolower="handleScrolltolower">
            <view v-for="(item,index) in storeList" :key="index" class="item boxShadow formBox">
              <view class="item-title">
                工项名称：{{ item.name }}
              </view>
              <view class="pric">标准工时费：{{ item.standardFee }}</view>
              <view class="storeName">门店名称：{{ item.storeBasicName }}</view>
              <view class="checkbox">
                <u-checkbox v-model="item.checkbox" size="50"
                            @change="checkboxChange(index, item.checkbox, item.optionNo)"></u-checkbox>
              </view>
            </view>
            <u-loadmore :margin-bottom="20" :status="status"/>
          </scroll-view>
        </view>
      </view>
    </view>
    <u-popup v-model="show" :closeable="true" border-radius="26" mode="bottom">
      <scroll-view class="" scroll-y="true" style="height: 900rpx;padding: 40rpx 0;box-sizing: border-box;">
        <view class="list">
          <u-empty v-if="!selectList.length" mode="list" style="margin-top: 200rpx;"></u-empty>

          <view v-for="(item, index) in selectList" :key="item.optionNo" class="item boxShadow">
            <view class="f-c-fs">
              <!-- <view class="color color1" :class="'color' + item.storeType">{{ item.storeTypeStr }}</view> -->
            </view>
            <view class="item-title f-c-sb">
              <view>{{ item.name }}</view>
              <u-checkbox v-model="item.checkbox"
                          @change="checkboxChange1(index, item.checkbox, item.optionNo)"></u-checkbox>
            </view>
            <view class="info">{{ item.storeBasicName }}</view>
          </view>

        </view>
      </scroll-view>
    </u-popup>
    <view class="btn-wrapper f-c-sa">
      <view class="text" @click="show = true">
        已选：{{ selectList.length }}项服务
        <u-icon color="#333" name="arrow-up" size="32"></u-icon>
      </view>
      <view class="btn" @click="goBack">确认</view>
    </view>
  </view>
</template>

<script>
import {couponWorkItem} from '@/api/marketing.js'
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
      show: false,
      header: '',
      tabindex: 1,
      current: 0,
      listQuery: {
        type: '',
        pageNo: 1,
        pageSize: 20,
        noData: true,
        workItemName: ''
      },
      status: 'loadmore',//初始加载状态
      state: 1, //请求状态修改：1，可请求；2，不可请求
      storeList: [],
      selectList: []
    };
  },
  computed: {
    ...mapGetters(["userInfo", "selectWorkItem"]),
  },
  onLoad(option) {
    let objParam = JSON.parse(option.param);
    this.listQuery.type = objParam.type;
    switch (this.listQuery.type) {
      case 1:
        this.header = "钣喷工项名称";
        break;
      case 2:
        this.header = "洗车工项名称";
        break;
      case 3:
        this.header = "保养工项名称";
        break;
      case 5:
        this.header = "美容工项名称";
        break;
    }
    this.init()
  },
  methods: {
    init() {
      this.getlist();
      this.selectList = this.selectWorkItem;
    },
    search() {
      this.storeList = [];
      this.listQuery.pageNo = 1;
      this.status = 'loadmore';
      this.state = 1;
      this.getlist();
    },
    checkboxChange(index, status, optionNo) {
      console.log(index, status, optionNo);
      if (!status) {
        this.selectList.push(this.storeList[index]);
      } else {
        this.selectList.forEach((val, index) => {
          if (val.optionNo == optionNo) {
            this.selectList.splice(index, 1);
          }
        });
      }
    },
    checkboxChange1(index, status, optionNo) {
      this.selectList.splice(index, 1);
      this.storeList.forEach((val, index) => {
        if (val.optionNo == optionNo) {
          this.storeList[index].checkbox = false;
        }
      });
    },
    checkList() {
      this.storeList.forEach((val, index) => {
        this.selectList.forEach((val1, index1) => {
          if (val.optionNo == val1.optionNo) {
            this.storeList[index].checkbox = true;
          }
        });
      });
    },
    getlist() {
      let that = this
      if (that.status == 'nomore') {
        return false
      }
      if (that.state == 2) {
        return false
      }
      that.state = 2;
      couponWorkItem(this.listQuery).then(res => {
        console.log(res);
        console.log(this.listQuery);
        if (this.listQuery.pageNo == 1) {
          that.storeList = res.data;
        } else {
          that.storeList = that.storeList.concat(res.data);
          res.data.length < that.listQuery.pageSize ? (that.status = 'nomore') : (that.status = 'loadmore');
        }
        this.storeList.forEach((val, index) => {
          val.checkbox = false;
        });
        this.checkList();
        if (this.listQuery.pageSize != res.data.length) {
          this.listQuery.noData = false;
        }
      });
    },
    //  滚动到底部触发加载更多数据
    handleScrolltolower() {
      this.status = 'loading';//滑到底部的时候显示状态为加载中~
      this.state = 1
      this.listQuery.pageNo++;
      console.log(this.listQuery.pageNo, 'page');
      this.getlist();//调用数据请求

    },
    goBack() {
      var pages = getCurrentPages(); // 获取页面栈
      var currPage = pages[pages.length - 1]; // 当前页面
      var prevPage = pages[pages.length - 2]; // 上一个页面
      prevPage.setData({
        selectList: this.selectList
      })
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  padding-top: 20rpx;

  .searchBox {
    width: 680rpx;
    margin: 20rpx auto;
  }

  .formBox {
    padding: 0 0 20rpx 0;

    .tab-wrapper {
      width: 100%;

      view {
        width: 350rpx;
        height: 98rpx;
        background: #eaf3ff;
        font-size: 24rpx;
        font-weight: 700;
        text-align: left;
        color: #177fff;
        text-align: center;
        line-height: 98rpx;

        &.active {
          font-size: 30rpx;
          background-color: #fff;
        }
      }
    }

    .search-wrapper {
      width: 100%;
      padding: 20rpx;
      box-sizing: border-box;
    }
  }
}

.list {
  width: 100%;
  margin-bottom: 140rpx;

  .item {
    position: relative;
    width: 660rpx;
    background: #ffffff;
    border-radius: 18rpx;
    margin: 23rpx auto;
    padding: 20rpx;
    box-sizing: border-box;

    .color {
      width: 110rpx;
      height: 36rpx;
      opacity: 1;
      background: #177fff;
      border-radius: 6rpx;
      font-size: 24rpx;
      font-weight: 700;
      text-align: center;
      color: #ffffff;
      line-height: 36rpx;
      margin-right: 18rpx;

      &.color1 {
        background: #177fff;
      }

      &.color2 {
        background: #ff6738;
      }

      &.color3 {
        background: #f54170;
      }

      &.color4 {
        background: #2db2ad;
      }
    }
  }

  .item-title {
    font-size: 32rpx;
    color: #444;
    line-height: 70rpx;
  }

  .pric, .storeName {
    font-size: 28rpx;
    color: #666;
    line-height: 60rpx;
  }

  .info {
    font-size: 24rpx;
    font-weight: 500;
    color: #666666;
    line-height: 36rpx;
  }

  .checkbox {
    position: absolute;
    right: 10rpx;
    top: 50%;
    transform: translateY(-50%);
  }
}

.btn-wrapper {
  width: 100%;
  height: 140rpx;
  background: #ffffff;
  position: fixed;
  left: 0;
  bottom: 0;

  .text {
    font-size: 32rpx;
    font-weight: 700;
    color: #177fff;
  }

  .btn {
    width: 410rpx;
    height: 100rpx;
    background: #177fff;
    border-radius: 50rpx;
    text-align: center;
    line-height: 100rpx;
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    line-height: 100rpx;
  }
}
</style>
